<template>
  <div class="page">
    <el-header>
      <div class="header-left">
        <img src="@/assets/images/logo.png" />
        <span class="header-left__title">风险分析</span>
      </div>
    </el-header>
    <GenerateChart class="generate-chart" :config="config" />
  </div>
</template>

<script>
import { GenerateChart } from '@/build-lib'
import { getTemplate } from '@/api/modules'

export default {
  components: {
    GenerateChart
  },

  data() {
    return {
      initLoading: false,
      config: {
        compInfos: [
          {
            genId: 'SearchBar',
            type: 'SearchBar',
            attrs: {
              data: {
                url: 'http://10.34.101.209:7001/cmca/text/getPrvdandAudTrmList'
              }
            }
          },
          {
            genId: 'Card__Button',
            type: 'Button',
            attrs: {
              data: {
                openUrl: 'http://www.baidu.com'
              }
            }
          },
          {
            genId: 'Card__Text',
            type: 'Text',
            attrs: {
              data: {
                url: 'http://10.34.101.209:7001/cmca/text/getModelMessage'
              }
            }
          },
          {
            genId: 'Card__AuditReport',
            type: 'AuditReport',
            attrs: {
              data: {
                url: 'https://www.fastmock.site/mock/faeeb8aec2b742395d0768afdeb9423f/vue-chart-making/report'
              }
            }
          },
          {
            genId: 'Card1__EcahrtsMap',
            type: 'EcahrtsMap',
            attrs: {
              data: {
                url: 'http://10.34.101.209:7001/cmca/text/getMapData'
              }
            }
          },
          {
            genId: 'Card1__Table',
            type: 'Table',
            attrs: {
              data: {
                url: 'http://10.34.101.209:7001/cmca/text/getTableRank'
              }
            }
          },
          {
            genId: 'Card1-Table__DownPopoverBtn',
            type: 'DownPopoverBtn',
            attrs: {
              data: {
                openUrl:
                  'https://www.fastmock.site/mock/faeeb8aec2b742395d0768afdeb9423f/vue-chart-making/table'
              }
            }
          },
          {
            genId: 'Card1__EcahrtsBar',
            type: 'EcahrtsBar',
            attrs: {
              data: {
                url: 'http://10.34.101.209:7001/cmca/text/getTopLine'
              }
            }
          },
          {
            genId: 'Card1__EcahrtsArea',
            type: 'EcahrtsArea',
            attrs: {
              data: {
                url: 'http://10.34.101.209:7001/cmca/text/getBottomData'
              }
            }
          }
        ],
        tempInfos: {
          template: 'Template1',
          uuid: '364f9dad-1a55-5857-8597-973e26197f54'
        }
      }
    }
  },

  created() {
    // this.init()
  },

  methods: {
    async init() {
      try {
        this.initLoading = true
        this.config = await getTemplate({
          funcId: 265
        })
      } finally {
        this.initLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  &::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #eff4ff;
    z-index: -1;
  }
  .el-header {
    background: #0c214e;
    height: 65px !important;
    padding: 0 20px;
    .header-left {
      display: flex;
      align-items: center;
      img {
        width: 130px;
      }
      &__title {
        font-size: 24px;
        color: #ffffff;
        letter-spacing: 2px;
        line-height: 65px;
        margin-left: 35px;
      }
    }
  }
  .generate-chart {
    padding: 20px 15%;
  }
}
</style>
